<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地球</title>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>

<body>
    <script src="./js/three.js"></script>
    <script type="module">
        import { OrbitControls } from './js/OrbitControls.js';
        
        let scene,camera,renderer,controls,group;
        let earth;

        init();
        animate();

        function init() {
            // 场景
            scene = new THREE.Scene();
            let bgTexture = new THREE.TextureLoader().load("./images/bg.jpg");
            scene.background = bgTexture;
            // 相机
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.z = 400;
            group = new THREE.Group();
            scene.add(group);
             
            // 渲染器
            renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            //控制器(旋转缩放)
            controls = new OrbitControls( camera, renderer.domElement );
            controls.minDistrance = 20;
            controls.maxDistrance = 50;
            controls.maxPolarAngle = Math.PI/2;
            controls.addEventListener( 'change', render );

            //添加光源 (半球光 HemisphereLight)
            initLight();

            // 创建地球
            initEarth();

            // 绑定事件
            window.addEventListener( 'resize', onWindowResize );
        }

        function animate() {
            requestAnimationFrame(animate);
            group.rotation.y -= 0.005;
            controls.update();
            render();
        };

        function render() {
            camera.lookAt(scene.position);
            renderer.render(scene, camera);
        }
        //创建光源 (半球光)
        function initLight(){
            let light = new THREE.HemisphereLight(0xffffff, 0x333333, 2);
            light.position.set(0, 0, 100); //点光源位置
            light.position.x = 0;
            light.position.y = 0;
            light.position.z = -200;
            group.add(light);
        }
        // 创建地球
        function initEarth(){
            let loader = new THREE.TextureLoader();
            loader.load('./images/earth.jpg', function (texture) {
                let earth_geometry = new THREE.SphereGeometry(200, 100, 100);
                let earth_material = new THREE.MeshBasicMaterial({
                    map: texture,
                    overdraw: 0.5
                });
                earth = new THREE.Mesh(earth_geometry, earth_material);
                earth.name = "地球";
                group.add(earth);
                group.rotation.x = THREE.Math.degToRad(35);
                group.rotation.y = THREE.Math.degToRad(170);
            });
        }
        // 窗口大小改变事件
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( window.innerWidth, window.innerHeight );
        }
    </script>
</body>

</html>